<template>
  <div class="user-management">
    <!-- 操作工具栏 -->
    <div class="mb-4 flex justify-between items-center">
      <div class="flex gap-2">
        <el-input
          v-model="searchQuery"
          placeholder="搜索姓名/工号"
          clearable
          style="width: 300px"
        />
        <el-button type="primary" @click="handleSearch">
          <el-icon><Search /></el-icon>
          搜索
        </el-button>
      </div>
      <el-button type="success" @click="openAddDialog">
        <el-icon><Plus /></el-icon>
        新增人员
      </el-button>
    </div>

    <!-- 部门树形结构 -->
    <div class="flex gap-4">
      <el-tree
        :data="departments"
        :props="treeProps"
        node-key="id"
        default-expand-all
        class="w-64 border-r pr-4"
        @node-click="handleNodeClick"
      />

      <!-- 用户表格 -->
      <el-table
        :data="filteredUsers"
        border
        stripe
        style="flex:1"
        v-loading="loading"
      >
        <el-table-column prop="empId" label="工号" width="120" />
        <el-table-column prop="name" label="姓名" width="120" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{row}">
            {{ row.gender === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="department" label="部门" width="150" />
        <el-table-column prop="role" label="角色" width="150">
          <template #default="{row}">
            <el-tag type="info">{{ row.role }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="150" />
        <el-table-column label="操作" width="180">
          <template #default="{row}">
            <el-button size="small" @click="openEditDialog(row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(row.empId)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle">
      <el-form :model="form" label-width="80px" :rules="rules" ref="formRef">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="部门" prop="department">
          <el-cascader
            v-model="form.department"
            :options="departments"
            :props="cascaderProps"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="form.role">
            <el-option
              v-for="role in roleOptions"
              :key="role.value"
              :label="role.label"
              :value="role.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search, Plus } from '@element-plus/icons-vue'

// 模拟数据
const departments = ref([
  {
    id: 1,
    label: '总公司',
    children: [
      { id: 11, label: '人事部' },
      { id: 12, label: '财务部' },
      { id: 13, label: '技术部' }
    ]
  }
])

const mockUsers = ref([
  {
    empId: '1001',
    name: '张三',
    gender: 'male',
    department: '技术部',
    role: '管理员',
    phone: '13800138000'
  }
])

// 响应式数据
const searchQuery = ref('')
const loading = ref(false)
const dialogVisible = ref(false)
const form = ref({})
const formRef = ref(null)
const currentDept = ref('')

// 配置项
const treeProps = { label: 'label', children: 'children' }
const cascaderProps = { value: 'label', checkStrictly: true }
const roleOptions = [
  { value: 'admin', label: '管理员' },
  { value: 'staff', label: '普通员工' },
  { value: 'finance', label: '财务人员' }
]

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ]
}

// 计算属性
const filteredUsers = computed(() => {
  return mockUsers.value.filter(user => {
    const matchSearch = user.name.includes(searchQuery.value) || 
      user.empId.includes(searchQuery.value)
    const matchDept = currentDept.value ? 
      user.department === currentDept.value : true
    return matchSearch && matchDept
  })
})

const dialogTitle = computed(() => form.value.empId ? '编辑用户' : '新增用户')

// 方法
const openAddDialog = () => {
  form.value = {
    empId: '',
    name: '',
    gender: '',
    department: '',
    role: '',
    phone: ''
  }
  dialogVisible.value = true
}

const openEditDialog = (row) => {
  form.value = { ...row }
  dialogVisible.value = true
}

const handleSubmit = async () => {
  const valid = await formRef.value.validate()
  if (!valid) return

  if (form.value.empId) {
    // 更新逻辑
    const index = mockUsers.value.findIndex(u => u.empId === form.value.empId)
    mockUsers.value.splice(index, 1, form.value)
  } else {
    // 新增逻辑
    form.value.empId = `U${mockUsers.value.length + 1000}`
    mockUsers.value.push(form.value)
  }
  dialogVisible.value = false
}

const handleDelete = (empId) => {
  const index = mockUsers.value.findIndex(u => u.empId === empId)
  mockUsers.value.splice(index, 1)
}

const handleNodeClick = (node) => {
  currentDept.value = node.label
}

const handleSearch = () => {
  // 实际应调用API
}
</script> 